<template>
	<view class="list-content">
		<view>
			<!-- 轮播图 -->
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="1000" :duration="500">
				<swiper-item style="width:100%; height: 400px;" v-for="(item,index) in nowPlayingList.subjects" :key="index">
					<!-- 添加click点击跳转事件，跳转到图片对应的详情页 -->
					<image @click="todetails(item.id)" style="width: 100%; height: 100%;" :src="item.images.large" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 正在上映的电影 -->
		<!-- 这里是先循环数组的每一项，然后循环每个数组下的对象 -->
		<view v-for="(item,index) in movieslist" :key="index">
			<!-- 循环数组 -->
			<view class="title">{{item.title}}<text @click="toClass(item.title)">>>></text></view>
			<view class="list">
			    <scroll-view 
				style="white-space: nowrap;" 
				class="scroll-view_H" 
				scroll-x="true">
					<!-- 循环对象 -->
					<view class="container" style="width: 80px; height:100px; display: inline-block;" v-for="(it,idx) in item.subjects" :key="idx" >
						<image @click="todetails(it.id)" :src="it.images.small"></image>
						<view class="name">{{it.title}}</view>
					</view>
			    </scroll-view>
			</view>
		</view>
	
	</view>
</template>

<script>
	import {comingSoon,newMovies,top250} from '../../apis'
	export default {
		data() {
			return {
				movieslist:[]
			}
		},
		onReady(){
			this.pageInit();
		},
		computed:{
			nowPlayingList(){
				// console.log(this.$store.state.nowPlayingList)
				return this.$store.state.nowPlayingList
			}
		},
		methods:{
			// 页面初始化，最终要在onReady中调用否者不会运行
			pageInit(){
				// 开启loading
				uni.showLoading({
				    title: '加载中'
				});
				// 将所有的调用接口的函数返回的promise结果集中.then
				Promise.all([
					this._comingSoon(),
					this._newMovies(),
					this._top250()
				]).then((res)=>{
					// console.log(res)
					let rel=[]
					// 遍历res
					res.map((item)=>{
						rel.push(item[1].data)
						// console.log(rel)
						this.movieslist=rel
						// 结束loading
						uni.hideLoading();
					})
				})
			},
			todetails(id){
				uni.navigateTo({
					url:"../details/details?id="+id
				})
				// console.log(id)
			},
			toClass(title){
				uni.navigateTo({
					url:"../class/class?title="+title
				})
				// console.log(id)
			},
			// toClass(title){
			// 	console.log("title--"+title)
			// 	uni.navigateTo({
			// 		url:"../class/class?title="+title
			// 		})
			// },
			// 下列带_的函数最终都返回一个promise,然后统一交由上面的函数进行下一步操作
			_comingSoon(){
				return comingSoon({
					start:"0",
					count:"8",
					city:this.$store.state.city
				})
			},
			_newMovies(){
				return newMovies({
					start:"0",
					count:"8",
					city:this.$store.state.city
				})
			},
			_top250(){
				return top250({
					start:"0",
					count:"8",
					city:this.$store.state.city
				})
			}
		}
	}
</script>

<style lang="scss">
	.list-content{
		color: white;
		background-color:#2C405A;
		.swiper{
			height:400upx;
			image{
				height: 100%;
			}
		}
		.title{
			line-height: 40px;
			margin-left: 9px;
			text{
				font-size: 16px;
				font-weight: 700;
				float: right;
				margin-right: 20px;
			}
		}
		
			
			.list{
				.container{
					margin-left: 10px;
					image{
						width: 100%;
						height:100%;
					}
					.name{
						font-size: 10px;
						height: 15px;
						line-height: 15px;
						text-align: center;
					}
				}
			}
		
	}
</style>
